﻿<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <span id="module">佛吉亚管理</span>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <span id="action">推车列表</span>
        </li>
    </ul>
</div>
<!-- END PAGE BAR -->
<div class="mt-bootstrap-tables" style="margin-top: 20px">
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-social-dribbble font-green hide"></i>
                    </div>
                    <div class="actions">
                        <a class="btn btn-default" href="javascript:Edit(null);">
                            <i class="fa fa-plus"></i>创建
                        </a>
                    </div>
                </div>
                <div class="portlet-body">
                    <!-- BEGIN FORM-->
                    @*<form id="defaultForm" class="form-horizontal" method="post" novalidate="novalidate">
                            <div class="mt-checkbox-inline" style="margin-top: -37px">
                                      <div class="pull-left" style="margin-top: 20px">
                                          状态：
                                          <select class="form-control input-inline" name="Deleted" id="State">
                                              <option value="">全部</option>
                                              <option value="1">正常</option>
                                              <option value="0">禁用</option>
                                          </select>
                                      </div>
                                  </div
                        </form>>*@
                    <!-- END FORM-->
                    <table id="table-pagination" data-toggle="table" data-url="@Url.Action("GetPagedList")"
                           data-height="526"
                           data-form-id="defaultForm"
                           data-show-refresh="true"
                           data-page-size="10"
                           data-page-list="[5, 10, 20, 50, 100, 200]"
                           data-auto-height="true"
                           data-search="true">
                        <thead>
                        <tr>
                            <th data-formatter="RowNumber" data-width="50">序号</th>
                            <th data-field="Number">车号</th>
                            <th data-field="TagKeys">标签</th>
                            <th data-align="center" data-field="CreatedTime" data-width="200">添加时间</th>
                            <th data-align="center" data-formatter="opColumns" data-width="220">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 参数设置 弹出框模板 -->
<div id="dialogTemplet" class="hide">
    <form class="form-horizontal" method="post" novalidate="novalidate">
        <div class="form-body">
            <div class="row">
                <div class="col-md-10">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="Number">车号</label>
                        <div class="col-md-10">
                            <div class="input-icon right">
                                @*<i class="fa"></i>*@
                                <input type="hidden" name="Id" class="form-control" value="" />
                                <input type="hidden" name="AreaId" class="form-control" value="" />
                                <input type="text" name="Number" id="Number" class="form-control" value="" placeholder="请填写车号" maxlength="15" required />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="MaximumCapacity">满车数量</label>
                        <div class="col-md-10">
                            <div class="input-icon right">
                                <i class="fa"></i>
                                <input type="number" name="MaximumCapacity" id="MaximumCapacity" class="form-control" value="" placeholder="请填写满车数量" maxlength="2" readonly="readonly" min="0" required number />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="TagKeys">标签</label>
                        <div class="col-md-10">
                            <div class="input-icon right">
                                <i class="fa"></i>
                                <textarea name="TagKeys" id="TagKeys" class="form-control" rows="5" cols="56" wrap="hard" placeholder="请填写标签,多个标签用,分割" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- End 弹出框模板 -->

@section scripts{
    <script type="text/javascript">

        var opColumns = function (value, row, index) {
            return `<a onclick="Edit('_row_')" href="javascript:void(0);">修改</a>
                      | <a onclick="remove('_id_')" href="javascript:void(0); ">删除</a>`
                .replace(/_id_/ig, row.Id).replace(/_row_/ig, escape(JSON.stringify(row)));
        },
                    remove = function (id) {
                        bootbox.confirm("是否确认删除？", function (result) {
                            if (!result) {
                                return;
                            }
                            $.ajax({
                                type: "POST",
                                url: "@Url.Action("Delete")",
                                data: { Id: id },
                                async: false,
                                success: function (result) {
                                    if (result.Success) {
                                        $("#table-pagination").bootstrapTable('refresh');
                                    } else {
                                        showToast(3, '系统消息', result.Message);
                                    }
                                }
                            });
                        });
                    },
                    Edit = function (row) {
                        var dataRow = null;
                        if (row != null)
                            dataRow = JSON.parse(unescape(row));

                        // 打开 bootbox 自定义弹出框
                        var settingParamDialog = bootbox.dialog({
                            title: "参数设置",
                            message: $("#dialogTemplet").html(),
                            className: "my-modal",
                            buttons: {
                                success: {
                                    label: "取 消"
                                },
                                main: {
                                    label: "保 存",
                                    className: "btn-primary",
                                    callback: function () {
                                        var formDoc = $(".my-modal .modal-body form");
                                        formDoc.submit();
                                        return false;
                                    }
                                }
                            }
                        });
                        //初始化弹出框
                        settingParamDialog.init(function () {
                            var formDoc = $(".my-modal .modal-body form");

                            if (dataRow != null) {
                                $("input[name='Id']", formDoc).val(dataRow.Id);
                                $("input[name='AreaId']", formDoc).val(dataRow.AreaId);
                                $("input[name='Number']", formDoc).val(dataRow.Number);
                                $("input[name='MaximumCapacity']", formDoc).val(dataRow.MaximumCapacity);
                                $("textarea[name='TagKeys']", formDoc).val(dataRow.TagKeys);
                            } else {
                                var areaId = '@(ViewBag.AreaId)';
                                var maximumCapacity = '@(ViewBag.MaximumCapacity)';
                                $("input[name='Id']", formDoc).val(null);
                                $("input[name='AreaId']", formDoc).val(areaId);
                                $("input[name='MaximumCapacity']", formDoc).val(maximumCapacity);
                            }
                            customFormValidate(formDoc,
                            {
                                Number: {
                                    remote: {
                                        type: 'POST',
                                        url: '@Url.Action("IsNumberExisted")',
                                        data: {
                                            Number: $("input[name='Number']", formDoc).val(),
                                            id: $("input[name='Id']", formDoc).val()
                                        }
                                    }
                                }
                            }, function (form) {
                                var data = $(form).serializeObject();
                                $.ajax({
                                    type: "POST",
                                    url: "@Url.Action("Edit")",
                                    data: data,
                                    async: false,
                                    success: function (reslut) {
                                        if (reslut.Success) {
                                            bootbox.hideAll(); //关闭弹出框
                                            showToast(0, '系统提示', "保存成功");
                                            $('#table-pagination').bootstrapTable('refresh');
                                        } else {
                                            showToast(3, '系统提示', reslut.Message);
                                        }
                                    },
                                    error: function (error) {
                                        showToast(3, '系统提示', " 操作失败!");
                                    }
                                });
                            });
                        }, {
                            Number: {
                                required: '车号不能为空',
                                remote: '该车号在该区域已存在'
                            }
                        });
                    };
    </script>
}
